import { Component, Optional, TemplateRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { ModalRef, ModalService } from '@iux/live';

@Component({
  templateUrl: './demo4.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Demo4Component {
  constructor(private modalService: ModalService) {}

  open() {
    this.modalService.create({ lvModalKey: 'myModal', lvContent: ModalCustomComponent });
  }
}

@Component({
  selector: 'modal-custom-component',
  template: `
    <div>Content components can be used independently.</div>
    <div>Content components can be used independently.</div>
    <div>Content components can be used independently.</div>
    <div>Content components can be used independently.</div>
    <div>Content components can be used independently.</div>
    <ng-template #header>
      <div class="lv-modal-title" style="color: green;">Custom Title in component</div>
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModalCustomComponent {
  constructor(@Optional() private modal: ModalRef) {}

  @ViewChild('header', { static: true }) header: TemplateRef<any>;

  ngOnInit() {
    this.modal &&
      this.modal.setProperty({
        lvOk: modal =>
          new Promise<void>(resolve => {
            setTimeout(() => {
              resolve();
            }, 1000);
          }),
        lvWidth: 600,
        lvFocusButtonId: 'ok',
        lvHeader: this.header,
      });
  }
}
